import React, { Component } from 'react';
import { Tooltip, Button, Table, message } from 'antd';
import Mpagination from '../../../../SystemManage/components/Mpagination';

export default class Remind extends Component {
  state = {
    columns: [
      {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        width: 30,
        align: 'center',
      },
      {
        title: '项目分期',
        dataIndex: 'projectStages',
        key: 'projectStages',
        width: 70,
        align: 'center',
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
      {
        title: '待办类型',
        dataIndex: 'todoTypeName',
        key: 'todoTypeName',
        width: 70,
        align: 'center',
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
      {
        title: '待办说明',
        dataIndex: 'content',
        key: 'content',
        width: 70,
        align: 'center',
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
      {
        title: '负责人',
        dataIndex: 'taskApproveName',
        key: 'taskApproveName',
        width: 70,
        align: 'center',
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
      {
        title: '创建时间',
        dataIndex: 'flowStartDate',
        key: 'flowStartDate',
        width: 100,
        align: 'center',
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
      {
        title: '处理人',
        dataIndex: 'handlePersonName',
        key: 'handlePersonName',
        width: 70,
        align: 'center',
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
      {
        title: '处理时间',
        dataIndex: 'handleTime',
        key: 'handleTime',
        width: 100,
        align: 'center',
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
      {
        title: '状态',
        dataIndex: 'todoStatusName',
        key: 'todoStatusName',
        align: 'center',
        width: 70,
      },
      {
        title: '操作',
        dataIndex: 'todoStatus',
        key: 'todoStatus',
        align: 'center',
        width: 70,
        render: (text, record) => (
          <Button
            type="link"
            onClick={() => {
              if (record.pcTaskUrl) {
                window.open(record.pcTaskUrl);
              } else {
                message.warning(`跳转路径错误${record.pcTaskUrl}`);
              }
            }}
          >
            {text === '0' ? '去处理' : '查看'}
          </Button>
        ),
      },
    ],
  };

  handlePaginationChange = (current, pageSize) => {
    const { dispatch, remindParams } = this.props;
    const params = {
      ...remindParams,
      current,
      pageSize,
    };
    dispatch({
      type: 'Workbench/requestRemindData',
      payload: {
        params,
      },
    });
  };

  render() {
    const { remindItems, remindLoading } = this.props;
    return (
      <div className="crar-content">
        {Object.keys(remindItems).length > 0 ? (
          <>
            <Table
              columns={this.state.columns}
              bordered
              rowKey="index"
              size="middle"
              dataSource={remindItems.list}
              pagination={false}
              loading={remindLoading}
              scroll={{ y: document.body.clientHeight - 252 }}
            />
            <Mpagination
              total={remindItems.total}
              pageSize={remindItems.pageSize}
              current={remindItems.current}
              pages={remindItems.pages}
              onShowSizeChange={(c, p) => this.handlePaginationChange(c, p)}
              handlePaginationChange={this.handlePaginationChange}
            />
          </>
        ) : null}
      </div>
    );
  }
}
